<template>
<div class="mt-30 warp">
  <img class="img" src='@/assets/images/img1.png'>
  <div class="inner">
    <img class="aniRotate" src='@/assets/images/img1.svg'>
  </div>
  <div class="inner">
    <img class="aniRotate" src='@/assets/images/img1-2.svg'>
  </div>
  <div class="outer">
    <div class="side aniZoomOutIn"></div>
  </div>
  <div class="dx dxAnim"></div>
</div>
</template>

<script>
  export default {
    name: 'index'
  }
</script>

<style scoped lang="scss">
.warp{
  position: relative;
  width: 1072px;
  height: 598px;
}
.dx {
  position: absolute;
  /*width:550px;*/
  /*height:339px;*/
  width:994px;
  height:990px;
  left: 50%;
  top: -330px;
  transform: translateX(-50%) scale(0.35);
  background: url('~@/assets/images/123.gif') no-repeat;
  //background: url('~@/assets/images/dx.png') no-repeat -1106px -2389px;
}
.inner{
  position: absolute;
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%) scale(1,0.5);
}
.outer{
  position: absolute;
  bottom: -120px;;
  left: 50%;
  transform: translateX(-50%) scale(1,0.5);
  .side{
    width: 750px;
    height: 750px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0);
    box-shadow: inset 0px 0px 200px 0px rgba(250, 173, 21, 0.4);
  }
}
</style>
